<html>
<head>
    <meta charset="UTF-8">

    <meta name="robots" content="noindex,nofollow">
    <meta name="googlebot" content="noimageindex">

    <meta name="copyright" content="">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=yes">
    <meta name="format-detection" content="email=no">

    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>阿福易购-手机注册</title>

    <link rel="stylesheet" href="../../css/public/base.css">
    <link rel="stylesheet" href="../../css/public/tip.css">
    <link rel="stylesheet" href="../../css/bootstrap/css/bootstrap.min.css">

    <style>
        body { background-color: #ececec;}

        .top-tit { background:url(../../images/logo-m.png) center 0 no-repeat;width: 100%;height: 120px;padding: 10px 0;color:#fff;font-size: 16px;z-index: 10;position: relative;}
        .blur-box { width: 100%;height: 70px;background-color: #121e42;position: absolute;bottom:0;left: 0;z-index: 2;}

        .main-box { width: 320px; margin: 0 auto;}
        .main-box form { margin: 20px 10px; }
        .form-control { background-color: #fff; border-radius: 0;padding: 12px;height: auto;}
        .submit { width: 100%;padding: 8px 0;font-size: 20px;}

        .ck-code .form-control{ width: 160px;float: left;}
        .ck-code .btn { width: 130px;float: right;border-radius: 0;padding: 12px 0;}

        .password .form-control{ padding-right: 68px;margin-right: -60px;float:left;}
        .password .btn { padding: 9px 14px;margin-top: 3px;border-color:#fff;background-color: #ededed;}
        .password .btn:hover { background-color: #e1e1e1;}
    </style>

</head>
<body>
<div class="fn-rel">
    <div class="blur-box"></div>
    <div class="top-tit "></div>
</div>

<div class="main-box">

    
    <form class="js-form" novalidate>
        <div class="form-group">
            <label class="sr-only" for="mobile">手机号码</label>
            <input id="mobile" type="text" class="form-control" placeholder="请输入手机号码" required autofocus>
        </div>
        <div class="form-group ck-code clearfix">
            <label class="sr-only" for="code">验证码</label>
            <input id="code" type="text" class="form-control" placeholder="请输入验证码" required>

            <div class="fn-fr">
                <a class="chk-code" href="#"><img src="http://www.afuyigou.com/captcha/0.1" width="130" height="46" alt="" id="chkCode" onclick="javascript:re_captcha();"></a>
            </div>
        </div>
        <div class="form-group ck-code clearfix">
            <label class="sr-only" for="code">短信验证码</label>
            <input id="code" type="text" class="form-control" placeholder="短信验证码" required>

            <div class="col-sm-4">
                <button id="btn-code" class="btn btn-default disabled" type="button" disabled>获取验证码</button>
            </div>
        </div>
        <div class="form-group password fn-rel">
            <label class="sr-only" for="password">密码</label>
            <input id="password"  type="password" class="form-control"  name="password" placeholder="密码：6到20个字符" required>
            <button id="btn-pwd" class="btn btn-default js-hide" type="button">显示</button>
        </div>
        <button id="submitBtn" type="submit" class="btn btn-info submit">立即注册</button>

        <div class="checkbox">
            <label>
                <input id="agree" type="checkbox" name="agree" checked="checked">
                我同意 <a href="" class="f-hl" target="_blank">" 服务条款 "</a>
            </label>
        </div>
    </form>

</div>
<!--<div class="fn-rgba fn-fix"></div>-->


<script src="../../js/jquery-1.11.3.min.js"></script>
<script src="../../js/base.global.js"></script>
<script src="../../js/tools.js"></script>


<script>
        var $form = $(".js-form"),
            $codeBtn = $("#btn-code"),
            $pwdBtn = $("#btn-pwd"),
            $mobileIpt = $('#mobile'),
            $codeIpt = $('#code'),
            $pwdInput = $('#password'),
            $agreeIpt= $("#agree"),
            $submitBtn=$('#submitBtn');

        //手机验证
        $mobileIpt.on('input',function(){
            var isOk = ckMobile($mobileIpt);

            if(!$codeBtn.hasClass('is-countDown')){
                $codeBtn.attr('disabled',!isOk);
                $codeBtn.toggleClass('disabled',!isOk);
            }
        })
        .on('focus',function(){
            $mobileIpt.closest('.form-group').removeClass('has-error');
        })
        .on('blur',function(){
            var isOk = ckMobile($mobileIpt);

            $mobileIpt.closest('.form-group').toggleClass('has-error',!isOk);
        });

        //密码验证
        $pwdInput.on('focus',function(){
            $pwdInput.closest('.form-group').removeClass('has-error');
        })
        .on('blur',function(){
            var isOk = ckPwd($pwdInput);

            $pwdInput.closest('.form-group').toggleClass('has-error',!isOk);
        });


        $pwdBtn.on('click',function(){
            //if($pwdInput.val()=='') return false;

            if($pwdBtn.hasClass('js-hide')){
                $pwdBtn.removeClass('js-hide').text('隐藏');
                $pwdInput.attr('type','text');
            }else{
                $pwdBtn.addClass('js-hide').text('显示');
                $pwdInput.attr('type','password');
            }
        });

        //获取验证码
        $codeBtn.on('click',function(){
            if($codeBtn.prop('disabled')) return false;

            var that=$(this),sNum=60000,countDown;
            var phone = $mobileIpt.val();
            var send = true;

            if(!ckMobile($mobileIpt)){
                $mobileIpt.focus();
                return;
            }

            //倒计时
            $codeBtn.addClass('is-countDown');
            countDown=tools.buttonCountdown(that,sNum,'s','后可重发',function(){
                $codeBtn.removeClass('is-countDown');
            });

         /*   $.ajax({
                url:"{{ URL('user/sms') }}"+ "?t=" + Math.random(),
                data:{phone:phone,send:send},
                type:'post',
                dataType:'json',
                success:function(res){
                  $codeBtn.addClass('is-countDown');
                  countDown=tools.buttonCountdown(that,sNum,'s','后可重发',function(){
                    $codeBtn.removeClass('is-countDown');
                  });
                },
                error:function(e){
                    that.removeClass('disabled');
                    $mobileIpt.next('.error').show().text(e.responseJSON.phone[0]).end().focus();
                }
            })*/
        });

        //服务条款
        $agreeIpt.on('input change',function(){
           $submitBtn.prop('disabled',!$agreeIpt.prop('checked'));
        });


        //表单提交
        $form.on('submit',function (e) {
            e.preventDefault();

            $submitBtn.prop('disabled',true);


            if(!ckMobile($mobileIpt)){
                $mobileIpt.focus();
                showMsg('请填写正确的手机号');

                return false;
            }

            if(!ckCode($codeIpt)){
                $codeIpt.focus();
                showMsg('请填写短信验证码');

                return false;
            }


            if(!ckPwd($pwdInput)){
                $pwdInput.focus();
                showMsg('密码应为6到20个字符');

                return false;
            }

            //ajax注册
            $.ajax({
                type: "POST",
                dataType: "json",
                url: '/',
                data: {
                    mobile: $mobileIpt.val(),
                    code: $codeIpt.val(),
                    password: $pwdInput.val(),
                    product: $("#product").val(),
                    agree: "on"
                },
                success:function(res){
                    tools.log(res,typeof res);
                    if(typeof res == 'string'){
                        //todo 跳转到注册成功页
                        window.location.href='';
                    }else{

                    }
                },
                error:function(e) {
                    if(e.responseJSON){
                        for(var i in e.responseJSON){
                            var curInput=$('[name="'+i+'"]');

                            if(curInput.length){
                                showMsg(e.responseJSON[i][0]);
                                curInput.focus();
                            }
                        }
                    }
                }
            });

        });


        function ckMobile(jqInput){
            var mobile = /^1[3|4|5|7|8]\d{9}$/;
            var isRequired=jqInput.prop('required');
            var val =jqInput.val();


            return (isRequired&&val.length) && (mobile.test(val));
        }

        function ckCode(jqInput){
            var isRequired=jqInput.prop('required');
            var val =jqInput.val();


            return (isRequired&&val.length);
        }
        function ckPwd(jqInput){
            var pwd=/^[^\s]{6,20}$/;
            var isRequired=jqInput.prop('required');
            var val =jqInput.val();


            return (isRequired&&val.length) && (pwd.test(val));
        }


        function showMsg(msg){
            if(!msg||msg.length==0) return false;

            $('body').notify(msg,0,{
                autoHidden:true,
                delay:2500,
                posStyle:"top:-30px;margin-top:-20px;",
                callback:function(){
                    $submitBtn.prop('disabled',false);
                }

            });
        }

        function re_captcha() {
            //var $url = "{{ URL('captcha') }}" + "/" + Math.random();
            var $url = "http://www.afuyigou.com/captcha" + "/" + Math.random();
            $('#chkCode').attr('src',$url);
        }
</script>

</body>
</html>